<template>
  <el-row :gutter="10">
    <el-col :span="7">类型</el-col>
    <el-col :span="17">
      <el-select v-model="material.type" @change="handleChangeMaterial">
        <el-option label="MeshBasicMaterial" value="MeshBasicMaterial" />
        <!-- <el-option label="MeshDepthMaterial" value="MeshDepthMaterial" /> -->
        <!-- <el-option label="MeshNormalMaterial" value="MeshNormalMaterial" /> -->
        <!-- <el-option label="MeshMatcapMaterial" value="MeshMatcapMaterial" /> -->
        <!-- <el-option label="MeshPhongMaterial" value="MeshPhongMaterial" /> -->
        <!-- <el-option label="MeshPhysicalMaterial" value="MeshPhysicalMaterial" /> -->
        <el-option label="MeshStandardMaterial" value="MeshStandardMaterial" />
        <!-- <el-option label="ShaderMaterial" value="ShaderMaterial" /> -->
      </el-select>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">识别码</el-col>
    <el-col :span="11">
      <el-input :value="material.uuid" disabled></el-input>
    </el-col>
    <el-col :span="4">
      <el-button @click="handleChangeUuid">更新</el-button>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">名称</el-col>
    <el-col :span="17">
      <el-input v-model="material.name"></el-input>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">颜色</el-col>
    <el-col :span="17">
      <el-color-picker v-model="materialColor" @active-change="handleChangeColor" />
    </el-col>
  </el-row>
  <template v-if="material.type === 'MeshStandardMaterial'">
    <el-row :gutter="10">
      <el-col :span="7">自发光</el-col>
      <el-col :span="17"> </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">粗糙度</el-col>
      <el-col :span="17"> </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">金属度</el-col>
      <el-col :span="17"></el-col>
    </el-row>
  </template>
  <el-row :gutter="10">
    <el-col :span="7">贴图</el-col>
    <el-col :span="17">
      <BUpload
        :key="material.uuid"
        v-model="textures.map"
        check
        @change="(url) => handleChangeTexture('map', url)"
      ></BUpload>
    </el-col>
  </el-row>

  <el-row v-if="material.type === 'MeshStandardMaterial'" :gutter="10">
    <el-col :span="7">自发光贴图</el-col>
    <el-col :span="17"></el-col>
  </el-row>

  <el-row :gutter="10">
    <el-col :span="7">透明贴图</el-col>
    <el-col :span="17">
      <BUpload
        :key="material.uuid"
        v-model="textures.alphaMap"
        check
        @change="(url) => handleChangeTexture('alphaMap', url)"
      ></BUpload>
    </el-col>
  </el-row>

  <template v-if="material.type === 'MeshStandardMaterial'">
    <el-row :gutter="10">
      <el-col :span="7">凹凸贴图</el-col>
      <el-col :span="17">
        <BUpload
          :key="material.uuid"
          v-model="textures.bumpMap"
          check
          @change="(url) => handleChangeTexture('bumpMap', url)"
        ></BUpload>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">法线贴图</el-col>
      <el-col :span="17">
        <BUpload
          :key="material.uuid"
          v-model="textures.normalMap"
          check
          @change="(url) => handleChangeTexture('normalMap', url)"
        ></BUpload>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">置换贴图</el-col>
      <el-col :span="17">
        <BUpload
          :key="material.uuid"
          v-model="textures.displacementMap"
          check
          @change="(url) => handleChangeTexture('displacementMap', url)"
        ></BUpload>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">粗糙贴图</el-col>
      <el-col :span="17">
        <BUpload
          :key="material.uuid"
          v-model="textures.roughnessMap"
          check
          @change="(url) => handleChangeTexture('roughnessMap ', url)"
        ></BUpload>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">金属贴图</el-col>
      <el-col :span="17">
        <BUpload
          :key="material.uuid"
          v-model="textures.metalnessMap"
          check
          @change="(url) => handleChangeTexture('metalnessMap', url)"
        ></BUpload>
      </el-col>
    </el-row>
  </template>

  <el-row :gutter="10">
    <el-col :span="7">环境贴图</el-col>
    <el-col :span="17">
      <BUpload
        :key="material.uuid"
        v-model="textures.envMap"
        check
        @change="(url) => handleChangeTexture('envMap', url)"
      ></BUpload>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">光照贴图</el-col>
    <el-col :span="17">
      <BUpload
        :key="material.uuid"
        v-model="textures.lightMap"
        check
        @change="(url) => handleChangeTexture('lightMap', url)"
      ></BUpload>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">面</el-col>
    <el-col :span="17">
      <el-select v-model="material.side">
        <el-option label="Front" :value="FrontSide" />
        <el-option label="Back" :value="BackSide" />
        <el-option label="Double" :value="DoubleSide" />
      </el-select>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">混合</el-col>
    <el-col :span="17">
      <el-select v-model="material.blending">
        <el-option label="No" :value="NoBlending" />
        <el-option label="Normal" :value="NormalBlending" />
        <el-option label="Additive" :value="AdditiveBlending" />
        <el-option label="Subtractive" :value="SubtractiveBlending" />
        <el-option label="Multiply" :value="MultiplyBlending" />
        <el-option label="Custom" :value="CustomBlending" />
      </el-select>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">透明度</el-col>
    <el-col :span="17">
      <el-input-number
        v-model="material.opacity"
        :min="0"
        :max="1"
        :precision="2"
        :step="0.1"
        controls-position="right"
        @change="material.needsUpdate = true"
      ></el-input-number>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">透明性</el-col>
    <el-col :span="17">
      <el-checkbox v-model="material.transparent" @change="material.needsUpdate = true" />
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">深度测试</el-col>
    <el-col :span="17">
      <el-checkbox v-model="material.depthtest" @change="material.needsUpdate = true" />
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">深度缓冲</el-col>
    <el-col :span="17">
      <el-checkbox v-model="material.depthwrite" @change="material.needsUpdate = true" />
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">线框</el-col>
    <el-col :span="17">
      <el-checkbox v-model="material.wireframe" />
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">自定义数据</el-col>
    <el-col :span="17">
      <el-input v-model="userData" type="textarea"></el-input>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { useActiveObject } from '@renderer/stores/activeObject'
import { storeToRefs } from 'pinia'
import * as THREE from 'three'
import {
  Color,
  MathUtils,
  Mesh,
  FrontSide,
  BackSide,
  DoubleSide,
  EquirectangularReflectionMapping,
  NoBlending,
  NormalBlending,
  AdditiveBlending,
  SubtractiveBlending,
  MultiplyBlending,
  CustomBlending
} from 'three'
import { computed, ref, type Ref } from 'vue'
import BUpload from '@renderer/components/b-upload.vue'
import useTexture from '@renderer/utils/useTexture'

const activeObjectStore = useActiveObject()
const { activeVO }: { activeVO: Ref<Mesh> } = storeToRefs(activeObjectStore)

const material = computed({
  get: () => activeVO.value.material,
  set: (val) => {
    if (activeVO.value) {
      activeVO.value.material = val
    }
  }
})

function handleChangeUuid() {
  if (material.value) {
    material.value.uuid = MathUtils.generateUUID()
  }
}

function handleChangeMaterial(val) {
  material.value = new THREE[val]()
  material.value.needsUpdate = true
  reflashTexture()
}

const userData = computed({
  get: () => JSON.stringify(material.value?.userData),
  set: (val) => {
    if (material.value) {
      material.value.userData = JSON.parse(val)
    }
  }
})
// 颜色
const materialColor = computed({
  get: () => `#${material.value.color.getHexString()}`,
  set: (val) => {
    material.value.color = new Color(val)
  }
})
function handleChangeColor(color: string) {
  materialColor.value = color
}

// 贴图
const textures = ref({
  map: '',
  specularMap: '',
  alphaMap: '',
  envMap: '',
  lightMap: '',
  bumpMap: '',
  normalMap: '',
  displacementMap: '',
  roughnessMap: '',
  metalnessMap: ''
})

async function handleChangeTexture(key: string, url: string) {
  if (url) {
    const texture = await useTexture(url)
    if (key === 'envMap') {
      texture.mapping = EquirectangularReflectionMapping
    }
    material.value[key] = texture
    material.value.needsUpdate = true
  } else {
    material.value[key] = null
    material.value.needsUpdate = true
  }
}

function reflashTexture() {
  textures.value = {
    map: '',
    specularMap: '',
    alphaMap: '',
    envMap: '',
    lightMap: ''
  }
}
</script>
<style lang="scss" scoped></style>
